<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="ul">
    
  </ul>
  <img src="http://cdn.xiaohigh.com/images/random/wallhaven-j3k7l5.jpg" width="300" alt="">
  <script>
    // setTimeout(() => {
    //   let li = document.createElement('li');
    //   li.innerHTML = 'anfeoiwajfioewa';
    //   ul.append(li);
    // }, 2000)

    //创建一个容器对象
    let fragment = document.createDocumentFragment();

    let arr = [
      'a',
      'b',
      'c'
    ];

    //遍历
    arr.forEach(item => {
      //创建元素
      let li = document.createElement('li');
      //设置标签文本
      li.innerHTML = item;
      //将 li 插入到 fragment 容器中
      fragment.append(li);
    });

    //将容器对象元素插入到文档中
    ul.append(fragment);

  </script>
</body>
</html>